<template>
  <div class="container">
    <div class="main">
      <div class="resize-box"></div>
      <v-textarea
        class="drag-element"
        label="可移动便签"
        bg-color="amber-lighten-4"
        color="orange orange-darken-4"
        no-resize
      ></v-textarea>
    </div>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped>
.main {
  position: absolute;
  display: inline-block;
}
.resize-box {
  width: 700px;
  height: 200px;
  position: relative;
  resize: both;
  overflow: hidden;
  z-index: 2;
}

.resize-box::-webkit-resizer {
  background-color: transparent;
}

.drag-element {
  position: absolute;
  right: -290px;
  bottom: -490px;
  width: 300px;
  height: 500px;
  z-index: 1;
}

.drag-element::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  left: -10px;
  top: -10px;
  z-index: 2;
  cursor: pointer;
}
</style>
